<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基础</title>
    <style>
        img {
            width: 200px;
        }

        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;
        }

        li {
            list-style: none;
            float: left;
            background-image: url(../images/精灵图.webp);
            width: 110px;
            height: 100px;
        }

        .change {
            background-color: pink;

        }
    </style>
</head>
<!-- 
        事件由三部分组成：
        事件源：事件被触发的对象，比如按钮
        事件类型：如何触发什么时间，比如鼠标点击onclick触发
        事件处理程序：通过一个函数赋值的方式，如弹出对话框
 -->
<!-- 
    修改元素的内容：
    1.element.innerText
    2.element.innerHTML
    两者都可以获取或者改变元素的内容
    innerText与innerHTML区别
    前者不能识别html元素，后者可以识别
  -->

<body>
    <!-- <button >点击我</button>
    <div>史努比</div> -->
    <!-- <button class="zxy">zxy</button>
    <button class="ldh">ldh</button>
    <img src="../images/1.webp" alt="" title="1">

    <div>上午好</div>
    <img src="../images/早上好.webp" alt="" class="fs"> -->

    <!-- <input type="text" placeholder="你好啊">
    <button>点击</button> -->
    <!-- <div></div> -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button class="change">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</body>
<script>
    // var btn = document.querySelector('button')
    // var div = document.querySelector('div')
    // // console.log(btn);
    // // console.log(div);
    // btn.onclick=function(){
    //    div.innerHTML='你好啊'
    // }

    // 修改元素的属性
    // onclick里面修改的src与title是元素的属性，鼠标一点击按钮就会改变图片
    // var zxy  = document.querySelector('.zxy')
    // var ldh = document.querySelector('.ldh')
    // var img = document.querySelector('img')
    // zxy.onclick=function(){
    //     img.src = '../images/1.webp'
    //     img.title = '1'
    // }
    // ldh.onclick=function(){
    //     img.src='../images/2.webp'
    //     img.title='2'
    // }
    // 分时问候
    // var div = document.querySelector('div')
    // var fs = document.querySelector('.fs')
    // var date = new Date()
    // console.log(date);
    // var h = date.getHours()
    // console.log(h);
    // if(h<12){
    //     fs.src = '../images/早上好.webp'
    //     div.innerHTML = '早上好'
    // }else if(h<18 && h>12){
    //     fs.src='../images/下午好.gif'
    //     div.innerHTML='下午好'
    // }else{
    //     fs.src='../images/晚上好.gif'
    //     div.innerHTML='晚上好'
    // }

    // 修改表单属性
    // 可利用DOM操作以下表单元素如type，value，checked等等
    // 若想直接修改栏目value的值直接input.value=。。。就行了
    // 若想点击一次按钮就弃用此按钮，使用disable，this/btn.disable=true即可
    // var ipt = document.querySelector('input')
    // var btn = document.querySelector('button')
    // var flag = 0
    // btn.onclick=function(){
    //     ipt.type = 'text'
    //    this.disabled = true
    //    ipt.value='hah1'
    // } 
    // 算法：利用flag变量一正一反的按钮来改变文本框的属性，
    // 来判断flag的值，如果是1就切换文本框，flag设置为0；
    // 如果是0就切换密码框，flag设置为1，点击一次之后flag一定要变换一次
    // btn.onclick=function(){
    //     if(flag==1){
    //         ipt.type='text'
    //         flag=0
    //     }else{
    //         ipt.type='password'
    //         flag=1
    //     }

    // }
    // var div =document.querySelector('div')
    // div.style.backgroundColor = 'skyblue'

    // 因为精灵图图标有规律从上到下每个图标相隔44px且第一个图标y轴为0，依次类推，
    // 下面的图标y轴都是负数，lis[i].style.backgroundPosittion=‘0 -’+index+‘px’。
    // 第一个0是x坐标后面的封号与它有空格表示y轴的负号。用for循环遍历取出来的每个小li，
    // 每个小li安放一个图标

    var lis = document.querySelectorAll('li')
    for (var i = 0; i < lis.length; i++) {
        var index = i * 113
        lis[i].style.backgroundPosition = '0-' + index + 'px'
    }
    //排他思想
    // 排他思想（算法）
    // 如果有同一组元素，想要让某个元素实现某种样式，就要用循环的排他思想：

    // 所有元素清除样式（干掉其他人）
    // 给当前元素设置样式（留下我自己）
    var btns = document.querySelectorAll('button')
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            for (var i = 0; i < btns.length; i++) {
                btns[i].className = ''
            }
            this.className = 'change'
        }
    }



</script>

</html>